<template>
  <main class="compile-main">
    <div class="compile-div">
      <p><span>修改用户</span><span @click="closeCompileUsers">X</span></p>
      <div class="ipt-div">
        <span>角色名称：</span>
        <el-input v-model="input1" />
      </div>
      <div class="ipt-div">
        <span>角色描述：</span>
        <el-input v-model="input2" />
      </div>
      <section>
        <el-button @click="closeCompileUsers">取消</el-button>
        <el-button type="primary" @click="comPersons">确定</el-button>
      </section>
    </div>
  </main>
</template>

<script setup>
import axios from "axios";
import VueCookies from "vue-cookies";
import { reactive, ref, onMounted } from "vue";
// 接收参数
const emit = defineEmits(["ddd"]);
// 关闭遮罩层
function closeCompileUsers() {
  emit("ddd", false);
}
// 角色名称
let input1 = ref();
// 角色描述
let input2 = ref();
// 接收id
let props = defineProps({
  hihi: Number,
});
onMounted(() => {
  const headers = {
    Authorization: VueCookies.get("token"),
  };
  axios.get(`/api/roles/${props.hihi}`, { headers }).then((res) => {
    // 角色名称
    input1.value = res.data.data.roleName;
    // 角色描述
    input2.value = res.data.data.roleDesc;
  });
});
// 确定
function comPersons() {
  const headers = {
    Authorization: VueCookies.get("token"),
  };
  const data = {
    roleName: input1.value,
    roleDesc: input2.value,
  };
  axios.put(`/api/roles/${props.hihi}`, data, { headers }).then((res) => {
    alert(res.data.meta.msg);
    // 关闭遮罩层
    closeCompileUsers();
  });
}
</script>

<style scoped>
.compile-main {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.compile-div {
  width: 700px;
  height: 300px;
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}
p {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin: 0px 0px 40px;
}
section {
  display: flex;
  position: absolute;
  bottom: 70px;
  right: 80px;
}
.ipt-div {
  display: flex;
  align-items: center;
  margin: 10px 0px;
}
.ipt-div span {
  width: 100px;
}
</style>